<route lang="json5">
{
  style: {
    navigationBarTitleText: '预约活动',
  },
}
</route>

<template>
  <view class="activity-booking common-container">
    <wd-form
      custom-class="common-form"
      ref="formRef"
      :model="formModel"
    >
      <wd-cell-group>
        <!-- <wd-input
            label="活动名称"
            label-width="80px"
            prop="name"
            readonly
            v-model="formModel.name"
            placeholder="请输入"
          /> -->
        <wd-cell
          title="活动名称"
          :label="formModel.name"
        ></wd-cell>
        <!-- <wd-input
            label="活动地址"
            label-width="80px"
            prop="address"
            readonly
            v-model="formModel.address"
            placeholder="请输入"
          /> -->
        <wd-cell
          title="活动介绍"
          :label="formModel.note"
        ></wd-cell>
        <!-- <wd-cell title="活动介绍">
            <wd-textarea v-model="formModel.note" readonly placeholder="请填写评价" />
          </wd-cell> -->
        <!-- <wd-datetime-picker label="预约时间" type="date" v-model="formModel.date" /> -->
        <!-- <wd-picker :columns="dateColumns" label="预约时间" v-model="formModel.date" /> -->
        <wd-picker
          :columns="hallColumns"
          label="所属礼堂"
          v-model="formModel.hallId"
        />
        <wd-picker
          :columns="dateColumns"
          label="预约时间"
          v-model="formModel.resource"
        />
      </wd-cell-group>
    </wd-form>
    <wd-message-box />
    <wd-button
      type="primary"
      @click="submitForm"
      :round="false"
      block
    >
      提交申请
    </wd-button>
  </view>
</template>

<script setup>
import HallApi from '@/service/hall'
import OrderApi from '@/service/order'
import { prevPageNeedRefresh } from '@/utils'
import { useMessage } from 'wot-design-uni'

const message = useMessage()

const dateColumns = ref([])

const showDateMessage = () => {
  if (dateColumns.value.length === 0) {
    message
      .confirm({
        msg: '时间已经约完，是否返回上一页？',
        title: '提示',
      })
      .then(() => {
        uni.navigateBack()
      })
      .catch(() => {
        console.log('点击了取消按钮')
      })
  }
}

const formRef = ref()
const formModel = ref({
  orderId: '',
  name: '',
  address: '', // 非必填
  note: '',
  // date: '',
  hallId: '',
  resource: '',
})
const formKeyMap = {
  name: '活动名称',
  note: '活动介绍',
  // date: '预约时间',
  hallId: '所属礼堂',
  resource: '预约时间',
}

const hallColumns = ref([])
const getHallDict = async () => {
  const { code, result } = await HallApi.getHallDict()
  if (code === 200 && result) {
    hallColumns.value = result
  }
}
getHallDict()

const getDetail = async (id) => {
  const { code, result, message } = await OrderApi.getOrderDetail({ id })
  if (code === 200 && result) {
    const { name, note, address, realResource } = result
    if (realResource) {
      dateColumns.value = realResource?.split(',')
    }
    showDateMessage()
    formModel.value = { ...formModel.value, name, note, address }
  } else {
    uni.showToast({
      icon: 'none',
      title: message || '请求错误',
    })
  }
}

const submitForm = () => {
  let objKey = ''
  for (const key in formKeyMap) {
    if (!formModel.value[key]) {
      objKey = key
      break
    }
  }
  if (objKey) {
    uni.showToast({
      title: `${formKeyMap[objKey]}不能为空`,
      icon: 'none',
    })
    return false
  }

  formRef.value
    .validate()
    .then(async () => {
      const { name, note, address } = formModel.value
      const params = {
        ...formModel.value,
        activityName: name,
        activityAddress: address,
        activityNote: note,
      }
      const { code, result, message } = await OrderApi.bookingOrder(params)
      if (code === 200 && result) {
        uni.showToast({
          icon: 'success',
          title: '提交成功',
        })
        uni.$emit('bookingOrderSuccess')
        setTimeout(() => {
          // isNavigateBack.value = true
          uni.navigateBack()
        }, 1000)
      } else {
        uni.showToast({
          icon: 'error',
          title: message,
        })
      }
    })
    .catch((error) => {
      console.error(error)
    })
}

onLoad((options) => {
  if (options.id) {
    formModel.value.orderId = options.id
    getDetail(options.id)
  }
})

// const isNavigateBack = ref(false)
// onUnload(() => {
//   prevPageNeedRefresh(isNavigateBack.value)
// })
</script>

<script>
export default {
  options: {
    styleIsolation: 'shared',
  },
}
</script>

<style lang="scss">
@import '../../../style/common-form';
</style>
